<template>
  <div class="add-material">
    <el-form :model="form" ref="formRef" label-width="100px">
      <el-form-item label="材质名称：" prop="materialName">
        <el-input v-model="form.material_name" placeholder="请输入材质名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">保存</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {submitMaterial} from '@/api/material.js';
// 表单数据
const form = ref({
  material_name: ''
});

// 表单引用
const formRef = ref(null);

// 提交表单
const handleSubmit = () => {
  if (form.value.material_name.trim() === '') {
    alert('请输入材质名称');
    return;
  }
  // 在这里可以添加与后端交互的逻辑
  console.log('提交的数据:', form.value);
  submitMaterial(form.value).then(response => {
    console.log(response);
    if (response.code === 200) {
      alert('添加成功');

      window.location.reload();
    } else {
      alert('添加失败');
    }
  });
};

// 重置表单
const handleReset = () => {
  formRef.value.resetFields();
};
</script>

<style scoped>
.add-material {
  width: 50%;
  margin: auto;
  padding-top: 50px;
}
</style>
